<template>
  <view class="wrap">
    <img
      class="headerBg"
      src="https://ainengli.meilianshuke.com/jkhx/common/huawei-bg.png"
      alt=""
    />
    <view class="patient-list">
      <view
        v-for="(item, index) of patientList"
        :key="index"
        @tap="select(item)"
        :class="['patient-items', item.checked ? 'checked' : '']"
      >
        <img
          v-if="item.checked"
          class="select-img"
          src="https://ainengli.meilianshuke.com/jkhx/common/right-top-selected.png"
          alt=""
        />
        <img
          v-if="item.token"
          class="select-img"
          src="https://ainengli.meilianshuke.com/jkhx/common/right-top-hasBind.png"
          alt=""
        />
        <view class="item-content">
          <text class="name">{{ item.name }}</text>
          <text class="sex">{{ item.gender }}</text>
          <text class="age">{{ item.age }}</text>
        </view>
      </view>
    </view>
    <view class="tips">
      将您的美联账号下对应就诊人与「华为运动健康」账号绑定，就可以同步您在「华为运动健康」账号上的运动和健康数据。
    </view>
    <view class="tips">
      <view style="font-weight: 700">注意:</view>
      1、一个用户对应绑定一个华为账号<br />
      2、仅同步授权后产生的部分数据，包括身高、体重、血糖、血氧等健康数据和锻炼记录
    </view>
    <view class="fixed">
      <button class="confirm_btn" @tap="toAuthorize">去授权</button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { onHide, onShow } from '@dcloudio/uni-app'
import { queryByKey, huawei_patient } from '@/module/api/HUAWEI'

const patientList = ref([])
const userInfo = ref({})
const selectInfo = ref({})

onShow(() => {
  userInfo.value = JSON.parse(uni.getStorageSync('userInfo'))
  init()
})

const init = () => {
  huawei_patient(userInfo.value.userId).then((res) => {
    patientList.value = res.data
    patientList.value.forEach((val: any) => {
      val.checked = false
    })
  })
}
const select = (item: any) => {
  if (item.token) {
    return
  }
  patientList.value.forEach((val: any) => {
    if (val.empi != item.empi) {
      val.checked = false
    }
  })
  item.checked = !item.checked
  if (item.checked) {
    selectInfo.value = item
    uni.setStorageSync('huaweiInfo', JSON.stringify(item))
  } else {
    selectInfo.value = {}
    uni.removeStorageSync('huaweiInfo')
  }
}
const toAuthorize = () => {
  if (JSON.stringify(selectInfo.value) !== '{}') {
    queryByKey().then((res) => {
      console.log(res)
      wx.navigateToMiniProgram({
        appId: 'wxa6c04f899577d944',
        path: 'pages/authLogin/authLogin',
        envVersion: 'release',
        extraData: {
          lang: 'zh-CN',
          client_id: '112611967',
          scope: res.data
        }
      })
    })
  } else {
    uni.showToast({
      title: '请选择绑定用户！',
      icon: 'none'
    })
  }
}
</script>
<style lang="scss" scoped>
.wrap {
  min-height: 100vh;
  position: relative;
  padding: 232rpx 32rpx 0;
}
.headerBg {
  width: 100%;
  height: 328rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.patient-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  justify-content: flex-start;
  position: relative;
  z-index: 2;
  max-height: 504rpx;
  overflow: auto;
  .patient-items {
    width: 31.7%;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 12rpx;
    border: 1rpx solid #e5e6eb;
    position: relative;
    padding: 32rpx 0;
    .select-img {
      width: 32rpx;
      height: 32rpx;
      top: -2rpx;
      right: 0;
      position: absolute;
    }
    .item-content {
      display: flex;
      gap: 8rpx;
      align-items: center;
      text-align: center;
      justify-content: center;
    }
    .name {
      display: inline-block;
      max-width: 112rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 500;
      font-size: 28rpx;
      color: #222222;
      // transform: translateY(8rpx);
    }
    .sex,
    .age {
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
      margin-left: 4rpx;
    }
    &.checked {
      border: 2rpx solid #00d1b6;
    }
  }
}
.tips {
  font-weight: 400;
  font-size: 24rpx;
  color: #666666;
  margin-top: 24rpx;
}
.fixed {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 10;
  padding: 24rpx 32rpx;
  padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
  background: #ffffff;
  display: flex;
  .confirm_btn {
    width: 100%;
    background: #00d1b6;
    border-radius: 44rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #ffffff;
  }
}
</style>
